import * as React from 'react';
import { FC, useState } from 'react';
import { Card, Col, Row, Tree } from 'antd';
import style from './style.less';
import { connect } from 'dva';
import { DeptStateType } from '@/models/dept';
import Job from '@/pages/boss/center/BossList/Job';
import { Dispatch } from 'redux';

const BossList: FC<any> = ({ depts, dispatch }) => {
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);

  const onCheck = (checkedKeys: React.Key[], info: any) => {
    setCheckedKeys(checkedKeys);
  };

  return (
    <div>
      <div>
        <img src={require('@/assets/banner.png')} className={style.banner} />
      </div>
      <Card className={style.content}>
        <Row justify="space-around">
          <Col span={5}>
            <Tree checkable defaultExpandAll onCheck={onCheck} treeData={depts.data} />
          </Col>
          <Col span={18}>
            <Job checkedKeys={checkedKeys}></Job>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default connect(({ depts, dispatch }: { depts: DeptStateType; dispatch: Dispatch }) => ({
  depts,
  dispatch,
}))(BossList);
